<template>
  <div class="m-tabs-wrapper mb-30">
    <el-radio-group :value="value" :size="size" @input="handleChange">
      <el-radio-button v-for="(o, index) in options" :key="index" :label="o.value">{{ o.label }}</el-radio-button>
    </el-radio-group>
    <slot name="action"></slot>
  </div>
</template>

<script>
export default {
  name: 'MTabs',
  props: {
    value: {
      type: [String, Number, Boolean],
    },
    size: {
      type: String,
      default: '-',
    },
    options: {
      type: Array,
      default() {
        return []
      },
    },
  },
  methods: {
    handleChange(val) {
      this.$emit('input', val)
      this.$emit('change')
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep {
  .el-radio-button__inner {
    color: #333333;
    font-size: 16px;
    font-weight: 600;
    border: none;
  }
  .el-radio-button:first-child .el-radio-button__inner {
    border: none;
    border-radius: 0;
  }
  .el-radio-button:last-child .el-radio-button__inner {
    border-radius: 0;
  }
}
.m-tabs-wrapper {
  position: relative;
  border-bottom: 1px solid var(--theme-color);
  .btn-export {
    position: absolute;
    right: 0;
    bottom: 4px;
  }
}
</style>
